<template>
    <div>
        <head-page class="header"></head-page>
        <div class="routers">
            <div class="asideLeft">
                <div class="list-header">
                    <img src="../../assets/images/home_image/customer_list.png" alt="">
                    <span class="list-header-span">设备列表</span>
                </div>
                <div class="list-search">
                    <input type="text" placeholder="设备号(IMEI) /设备名" v-model="filterInput" @keyup="filterDevice">
                </div>
                <div class="list-content">
                    <div class="panel panel-default" v-for="(user, key) in list">
                        <div class="panel-heading" role="tab">
                            <h4 class="panel-title">
                                <a role="button" data-toggle="collapse" aria-expanded="false"
                                   aria-controls="collapseOne"
                                   :href="'#collapse' + key" @click="collapse($event, key, user)">
                                    <i class="bgClose" :class="bgFlag[key] === 'false' ? 'bgOpen' : ''"></i>
                                    {{ user.userName }}
                                    <span class="equip-num">
                                         {{ user.onlineNum }}/{{ user.equips ? user.equips.length : 0 }}
                                    </span>
                                </a>
                            </h4>
                        </div>
                        <div :id="'collapse' + key" class="panel-collapse collapse" role="tabpanel"
                             aria-labelledby="headingOne">
                            <div class="panel-body">
                                <p class="equip-list" v-for="(equip, index) in user.equips">
                                    <a href="javascript:void(0);" @click="equipClick(equip)">
                                        <span class="equip-name">{{ equip.name }}</span>
                                        <span class="status" :class="{online : equip.online, offline : !equip.online}">
                                            {{ equip.online ? '在线' : '离线' }}
                                        </span>
                                    </a>
                                    <span class="list-content-btns">
                                        <button type="button" @click="trackInTime(equip)">实时跟踪</button>
                                        <button type="button" @click="historyTrail(equip.imei)">历史轨迹</button>
                                        <button type="button" @click="equipInfo(equip)">设备信息</button>
                                    </span>
                                </p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="myMap">
                <div class="myMap_top">
                    <span class="address" v-text="addressDetail"></span>
                    <div class="component-group">
                        <div class="btn-group">
                            <select name="mapChoose" id="mapChoose" class="map-choose" v-model="mapChoose"
                                    @change="mapChange">
                                <option value="baidu">百度地图</option>
                                <option value="google">谷歌地图</option>
                            </select>
                            <label for="mapChoose">
                            </label>
                        </div>
                        <span class="myCheckbox">
                            <input type="checkbox" id="equipName" v-model="equipName" @change="showEquipName">
                            <label for="equipName" class="equipName">设备名称</label>
                        </span>
                        <div class="myMap_switch" @click="showMenu">
                        <span class="myMap_switch_span"
                              :class="{ myMap_switch_open : isShowMenu, myMap_switch_close : !isShowMenu }"></span>
                        </div>
                    </div>
                </div>
                <baidu-map @sendAddrMsg="getAddressMsg" @showEquipInfo="equipInfo" v-if="mapChoose === 'baidu'"
                           ref="baiduMapComp"></baidu-map>
                <google-map @sendAddrMsg="getAddressMsg" @showEquipInfo="equipInfo" v-else
                            ref="googleMapComp"></google-map>
                <!--编辑弹窗-->
                <edit ref="getListData"></edit>
            </div>
        </div>
    </div>
</template>

<script>
    import headPage from '@/pages/header'
    import baiduMap from './baidu'
    import googleMap from './google'
    import Edit from '@/components/equipEdit/equipEdit' // 引入【编辑】弹窗文件

    export default {
        name: '',
        components: {
            headPage,
            baiduMap,
            googleMap,
            Edit,
        },
        data () {
            return {
                addressDetail: '',
                mapChoose: 'baidu',
                list: [], // 客户列表
                allUsers: [], // 客户列表副本
                bgFlag: {},
                equipName: true, // 默认显示设备
                isShowMenu: true, // 显示导航栏
                toHistory: {},
                filterInput: '' // 筛选输入框的值
            }
        },
        methods: {
            getAddressMsg (data) {
                this.addressDetail = data
            },
            collapse (e, key, user) {
                this.$set(this.bgFlag, key, e.target.getAttribute('aria-expanded'))
                if (this.$refs.baiduMapComp) {
                    this.$refs.baiduMapComp.getEquips(user)
                }
                if (this.$refs.googleMapComp) {
                    this.$refs.googleMapComp.getEquips(user)
                }
            },
            mapChange () {
                this.addressDetail = ''
            },
            equipClick (info) {
                if (this.$refs.baiduMapComp) {
                    this.$refs.baiduMapComp.getEquip(info)
                }
                if (this.$refs.googleMapComp) {
                    this.$refs.googleMapComp.getEquip(info)
                }
            },
            showEquipName () {
                if (this.$refs.baiduMapComp) {
                    this.$refs.baiduMapComp.showEquipName(this.equipName)
                }
                if (this.$refs.googleMapComp) {
                    this.$refs.googleMapComp.showEquipName(this.equipName)
                }
            },
            showMenu () {
                if (this.isShowMenu) {
                    $('.asideLeft').animate({'width': 0}, 'linear')
                    $('.myMap').animate({'width': '1940px'}, 'linear')
                } else {
                    $('.asideLeft').animate({'width': '12.5%'}, 'linear')
                    $('.myMap').animate({'width': '87.5%'}, 'linear')
                }
                this.isShowMenu = !this.isShowMenu
            },
            trackInTime (equip) {
                this.equipClick(equip)
                if (this.$refs.baiduMapComp) {
                    this.$refs.baiduMapComp.trackInTime(equip)
                }
                if (this.$refs.googleMapComp) {
                    this.$refs.googleMapComp.trackInTime(equip)
                }
            },
            historyTrail (imei) {
                this.toHistory.imei = imei
                this.toHistory.from = this.mapChoose
                this.$router.push({path: '/history', query: {key: this.toHistory}})
            },
            equipInfo (data) {
                this.$ajax
                    .equip
                    .queryEquip(data.imei)
                    .then((res) => {
                        let result = res.data
                        if (result.code === 200) {
                            this.$refs.getListData.getInfo(result.result)
                            $('#equip_edit').modal('toggle')
                        } else if (result.code === 408) {
                            this.$store.commit('showAlert', {error: this.$msgDictionary.loginGetaway})
                            let timer = setTimeout(() => {
                                clearTimeout(timer)
                                $('#msgModal').modal('hide')
                                this.$router.push({path: '/login'})
                            }, 2000)
                        } else {
                            this.$store.commit('showAlert', {error: result.msg})
                        }
                    }, () => {
                        this.$store.commit('showAlert', {error: this.$msgDictionary.serviceException})
                    })
            },
            /**
             * 左侧输入框筛选
             */
            filterDevice () {
                let regName = /^\d+$/
                let arr = []
                if (this.filterInput === '') {
                    arr = this.allUsers
                } else if (regName.test(this.filterInput)) { // IMEI号
                    this.allUsers.forEach((item) => {
                        if (item.equips) {
                            item.equips.forEach((val) => {
                                if (val.imei === this.filterInput) {
                                    item.equips.length = 0
                                    item.equips.push(val)
                                    arr.push(item)
                                }
                            })
                        }
                    })
                } else {  // 设备名
                    this.allUsers.forEach((item) => {
                        if (item.equips) {
                            item.equips.forEach((val) => {
                                if (val.name === this.filterInput) {
                                    item.equips.length = 0
                                    item.equips.push(val)
                                    arr.push(item)
                                }
                            })
                        }
                    })
                }
                this.list = arr
            }
        },
        activated () {
            /*
           接收myClient传入的客户信息
            */
            let user = this.$store.state.positionUser
            this.$store.commit('setPositionUser')
            if (user) {
                let timer = setInterval(() => {
                    if (this.list.length > 0) {
                        clearInterval(timer)
                        this.list.forEach((item) => {
                            if (item.userName === user.userNickname) {
                                if (this.$refs.baiduMapComp) {
                                    this.$refs.baiduMapComp.getEquips(item)
                                }
                                if (this.$refs.googleMapComp) {
                                    this.$refs.googleMapComp.getEquips(item)
                                }
                            }
                        })
                    }
                }, 10)
                let time = setTimeout(() => {
                    clearInterval(timer)
                    clearTimeout(time)
                }, 10000)
            }
        },
        mounted () {
            this.$store.commit('showLoading', 'show')
            let timer = setInterval(() => {
                if (this.$store.state.adminInfo) {
                    clearInterval(timer)
                    let id = this.$store.state.adminInfo.id
                    this.$ajax
                        .userInfo
                        .queryAllDealer(id)
                        .then(res => {
                            let data = res.data
                            if (data.code === 200) {
                                this.$store.commit('showLoading', 'hide')
                                if (data.result === undefined) {
                                    return
                                }
                                this.list = data.result
                                this.allUsers = JSON.parse(JSON.stringify(this.list))
                            } else if (result.code === 408) {
                                this.$store.commit('showAlert', {error: this.$msgDictionary.loginGetaway})
                                let timer = setTimeout(() => {
                                    clearTimeout(timer)
                                    $('#msgModal').modal('hide')
                                    this.$router.push({path: '/login'})
                                }, 2000)
                            } else {
                                this.$store.commit('showAlert', {error: data.msg})
                                $('#msgModal').modal('hide')
                            }
                        }, () => {
                            this.$store.commit('showAlert', {error: this.$msgDictionary.serviceException})
                            $('#msgModal').modal('hide')
                        })
                }
            }, 1)
        }
    }
</script>
<style scoped>
    * {
        margin: 0;
        padding: 0;
    }

    a, a:active, a:hover {
        text-decoration: none;
    }

    .asideLeft {
        height: 100%;
        background: #263238;
        width: 16%;
        overflow: hidden;
    }

    .myMap {
        width: 87.5%;
        height: 100%;
    }

    .list-header {
        padding: 0.2rem 0.3rem;
        color: white;
        background: #2F3A40;
        white-space: nowrap;
        border-bottom: 1px solid #1A1E20;
    }

    .list-header-span {
        padding-left: 0.2rem;
        font-size: 16px;
    }

    .list-search {
        padding: 0.13rem 0.15rem;
    }

    .list-search input {
        border: 1px solid #1A1E20;
        display: block;
        border-radius: 4px;
        margin: 0;
        width: 100%;
        background: #263238;
        outline: none;
        color: #fff;
        padding: 0.1rem 0.35rem 0.1rem 0.08rem;
        background: url("../../assets/images/home_image/search.png") no-repeat 95%;
    }

    .list-content {
        padding-top: 0.05rem;
        height: 84%;
        white-space: nowrap;
        background: #263238;
        overflow-y: auto;
    }

    .panel-default {
        background: #263238;
        border: none;
        margin: 0;
    }

    .panel-default .panel-heading {
        padding: 0;
        background: #263238;
        border: none;
        color: #fff;
    }

    .panel-default .panel-heading i.bgClose {
        display: inline;
        padding-left: 0.26rem;
        background: url("../../assets/images/position_image/device_close.png") no-repeat;
    }

    .panel-default .panel-heading i.bgOpen {
        background-image: url("../../assets/images/position_image/device_open.png");
    }

    .panel-default .panel-heading a {
        display: block;
        padding-left: 0.2rem;
        line-height: 0.2rem;
        margin-bottom: 0.2rem;
    }

    .panel-default .panel-heading .equip-num {
        float: right;
        margin-right: 0.3rem;
        color: #666;
    }

    .panel-collapse .panel-body {
        padding: 0;
    }

    .panel-collapse .equip-list a {
        display: block;
        padding-left: 0.48rem;
        color: #fff;
        height: 0.3rem;
        line-height: 0.3rem;
    }

    .panel-collapse .equip-list {
        height: 0.3rem;
        transition: height 0.5s;
        -moz-transition: height 0.5s; /* Firefox 4 */
        -webkit-transition: height 0.5s; /* Safari 和 Chrome */
        -o-transition: height 0.5s; /* Opera */
        overflow: hidden;
    }

    .panel-collapse .equip-list:hover {
        height: 0.6rem;
        background: #2F3A40;
    }

    .panel-collapse .equip-list:last-child {
        margin-bottom: 15px;
    }

    .panel-collapse .equip-list .equip-name {
        display: inline-block;
        width: 1rem;
    }

    .panel-collapse .equip-list .status {
        margin-left: 0.2rem;
    }

    .panel-collapse .equip-list .status.online {
        color: #17D29C;
    }

    .panel-collapse .equip-list .status.offline {
        color: #666;
    }

    .list-content-btns {
        padding-left: 0.36rem;
        white-space: nowrap;
    }

    .panel-collapse .equip-list:hover .list-content-btns {
        display: inline;

    }

    .list-content-btns button {
        height: 0.26rem;
        border-radius: 0.13rem;
        padding: 0 0.08rem;
        border: 0;
        outline: none;
        font-size: 0.12rem;
        color: #fff;
        background: #17D29C;
    }

    .component-group {
        float: right;
        margin-right: 0.3rem;
    }

    .equipName {
        font-weight: normal;
        font-size: 13px;
        color: rgb(102, 102, 102);
    }

    .myMap_switch {
        position: relative;
        display: inline-block;
        margin-left: 0.7rem;
        top: 0.1rem;
        cursor: pointer;
    }

    .myMap_switch_span {
        padding-left: 0.16rem;
    }

    .myMap_switch_open {
        background: url("../../assets/images/position_image/open.png") no-repeat;
    }

    .myMap_switch_close {
        background: url("../../assets/images/position_image/block.png") no-repeat;
    }

    .btn-group {
        padding-top: 0.15rem;
    }

    .map-choose {
        min-width: 1.03rem;
        padding: 0.02rem;
        margin: 0;
    }

    .myMap_top {
        position: relative;
        height: 0.5rem;
        background: #e9f6f2;
        width: 100%;
        box-shadow: 0 5px 5px #DCE9E5 inset;
    }

    .address {
        position: absolute;
        left: 0.3rem;
        top: 0.16rem;
        font-size: 0.16rem;
    }

    .myCheckbox {
        position: relative;
        padding-left: 0.65rem;
        top: 0.1rem;
    }

    #userMeun li {
        position: absolute;
        width: 1.02rem;
        height: 0.3rem;
        background: pink;
    }

    #userMeun li a {
        position: absolute;
    }

    #nav_top span {
        font-size: 0.18rem;
        padding-left: 0.1rem;
        margin-right: 0.05rem;
        padding-right: 1rem;
    }

    .routers {
        display: flex;
        height: 90vh;
    }

</style>
